<template>
  <div class="c-bg-sgray c-minh">
    <div class="fixTop">
      <new-search-bar
        bgSearch="c-bg-white c-pv24-i"
        @search='startSearch'
        @cancel='startSearch'
      ></new-search-bar>
    </div>
    <div class="c-pt100">
      <div class="c-text-hidden c-bg-sgray c-ph12">
        <water-fall v-model="circleList" ref="waterfall">
          <template v-slot:list="{list}">
            <div class="c-p c-br16 c-bg-white c-ml12 c-mr12 c-mt24 item-fall" @click="handleClickCircleFeed(item.circleId)" v-for="(item, index) in list" :key="index">
              <div class="c-w100 c-text-hidden c-maxh310">
                <img
                  class="c-w100 imgCloseBig c-br-tl16 c-br-tr16"
                  v-lazy="$addXossFilter(item.avatar || require('../../../assets/defult270.png'))"
                  alt=""
                >
              </div>
              <div class="c-pv20 c-ph20">
                <p class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.name}}</p>
                <div class="c-fs20 c-fc-gray c-mt12 c-mb20">
                  <span>{{item.memberCount | formatTenThousand}}人加入</span> |
                  <span>{{item.feedCount | formatTenThousand}}条动态</span>
                </div>
                <div class="c-fs22 c-fc-xmlred c-fw600" v-if="item.payType == 1">免费</div>
                <div class="c-fs22 c-fc-xmlred c-fw600" v-else-if="item.payType == 4">配套课程</div>
                <div class="c-fs22 c-fc-xmlred c-fw600" v-else-if="item.payType == 3">加密</div>
                <div v-else class="c-fc-xmlred c-fw600 c-lh" :class="Number(item.price) == 0 ? 'c-fs22':'c-fs26'">
                  <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181, item.optimal, 'index')}}
                </div>
              </div>
            </div>
          </template>
        </water-fall>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无结果" class="c-bg-sgray"></loading-status-tem>
    </div>
    <div v-if="companyAuth != null && companyAuth.companyNav != null">
      <nav-bottom-bar :itemIndex="27" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 27"></nav-bottom-bar>
    </div>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import waterFall from "@/components/templates/common/waterfall.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 10;
let pageIndex = 0;
let page = 1;
let searchText; //搜索输入框
export default {
  name: 'CircleList',
  components: {
    newSearchBar,
    loadingStatusTem,
    waterFall,
    NavBottomBar
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      dataStatus: 'HAS_MORE_DATA',
      circleList: [],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    }
  },
  activated() {
    setDocumentTitle("圈子列表");
    if (utilJs.checkNeedInitData(this.circleList)) {
      this.initData()
    }
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    initData() {
      pageIndex = 0;
      page = 1;
      searchText = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.circleList = [];
      this.$nextTick(() => {
        this.$refs.waterfall.clear();
      })
      this.getLists();
    },
    handleClickCircleFeed(id) {
      let toPath = `/homePage/circle/circleFeed?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    startSearch(e) {
      page = 1;
      this.circleList = [];
      this.$refs.waterfall.clear();
      searchText = e.searchValue;
      this.getLists();
    },
    getLists() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/lists?circleName=${searchText}&index=${pageIndex}&page=${page}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.circleList = res.data;
        } else {
          this.circleList = [...this.circleList, ...res.data];
        }
        if (res.total * 1 == this.circleList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR"
      })
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.circleList.length > 0) {
          this.getLists();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = '圈子列表';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '圈子列表';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}

.item-fall{
  width: calc(100% - 0.6rem);
}
</style>